<script setup lang="ts">
import type { ContentCollectionItem } from '@nuxt/content'
const router = useRouter()
const { data: blogs, status } = await useAsyncData('blogs', () => $fetch('/api/blog'))
const blog = ref<null|ContentCollectionItem|undefined >(null)
async function getContent(id:string){
  router.push('/GBlog/'+id)
}
</script>

<template>
  <GMyTransition>
    <div>blog</div>
    <ContentRenderer v-if="blog" :value="blog"/>
    <template v-else>
      <div v-if="status == 'pending'">loading...</div>
        <TransitionGroup enter-active-class='transition delay-150 duration-300' 
          leave-active-class='transition delay-150 duration-300' 
          enter-from-class='opacity-0'
          leave-to-class='opacity-0'
          v-else 
          tag='ul'
        >
        <li v-for="item in blogs" :key="item" @click="getContent(item.id)">{{ item.title }}</li>
        </TransitionGroup>
    </template>
  </GMyTransition>
</template>
